<!--
 * @Author: HeAo
 * @Date: 2022-08-24 14:20:54
 * @LastEditTime: 2022-08-24 14:20:55
 * @LastEditors: HeAo
 * @Description: 
 * @FilePath: \JavaScripe\day-13事件机制\08-事件的初体验.html
 * 别乱动！
-->
<!--
 * @Description: 
 * @Author: ZachGmy
 * @Date: 2022-08-23 16:51:15
 * @LastEditors: ZachGmy
 * @LastEditTime: 2022-08-23 16:59:19
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="container"></div>
  <!-- 1.直接在元素中绑定事件 在JS值实现对应的方法就可以了 注意 如果没有参数 也必须加上小括号 -->
  <button id="btn1" onclick="btn1Click()">点我呀</button>
  <button id="btn2">点我呀2</button>
  <script>
    // 如何触发点击事件？
    // 1
    // function btn1Click() {
    //   console.log('按钮一被点击了');
    // }
    // 2
    // 获取按钮二的节点 在js中给它绑定点击事件
    var btn2 = document.getElementById('btn2')
    btn2.onclick = function () {
      // 新建一个节点 添加到对应的父容器中
      // 获取父容器
      var container = document.getElementById('container')
      // 创建子节点
      var newElement = document.createElement('p')
      newElement.innerHTML = '我是一个段落标签'
      newElement.style.color = 'red'
      // 将子节点添加到父容器中
      container.appendChild(newElement)
    }
  </script>
</body>

</html>